<template>
  <div class="ConsumingConfiguration">
    <div class="leftbox">
      <FilterSelect2
      :valuekey="{ name:'text',value:'value'}" 
      :optionlist="typelist" 
      @updateModelValue="updateModelValue"
      v-model="energyType"
      ></FilterSelect2>
      <el-input
        style="margin: 10px 0;"
        size="small"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        @node-click="handleNodeClick"
        :highlight-current="true"
        :props="defaultProps"
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
    </div>
    <div class="bodybox">
      <el-button type="primary" size="small" style="margin-right: 20px;" @click="submit">保 存</el-button>
      <el-radio-group v-model="isarr" size="small" @change="changeradio">
        <el-radio-button label="noarr">全不选</el-radio-button>
        <el-radio-button label="arr">全选</el-radio-button>
      </el-radio-group>
      <el-divider></el-divider>
      <div class="tofor">
        <el-checkbox-group v-model="checkedlist">
          <el-checkbox v-for="item in grouplist" :key="item.id" :label="item.id">{{ item.deviceName }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
import {getequiptreeapi,getequipListapi,postequipsetbindapi} from '@/api/energy-consumption/energy-consuming/ConsumingConfiguration'
import FilterSelect from '@/components/FilterSelect'
import {getEnergyTypeApi} from '@/api/energy-consumption/Basic-information/Price-scheme'
export default {
  name: 'ConsumingConfiguration',
  components: {
    FilterSelect
  },
  data() {
    return {
      isarr:'',
      data: [],
      defaultProps: {
        children: 'tagList',
        label: 'name'
      },
      energyType: '',
      filterText:'',
      typelist: [],
      grouplist: [],
      checkedlist: [],
      treevalue:{}
    };
  },

  async mounted() {
    const { data: { list } } = await getEnergyTypeApi()
    this.typelist = list
    // this.$set(this,'energyType',list[0].value)
    const { data: { list: array } } = await getequiptreeapi()
    this.data=array
  },

  methods: {
    // 保存
    async submit() {
      this.grouplist.forEach((ele) => {
        if (this.checkedlist.includes(ele.id)) {
          ele.bindFlag = 1
        } else {
          ele.bindFlag = 0
        }
      })
      const arr = this.grouplist.map(ele => {
        const { deviceName, ...obj } = ele
        return obj
      })
      const res=await postequipsetbindapi(arr)
      this.$message({
        type:res.code=='200'?'success':'warning',
        message: res.code == '200' ? '操作成功':res.message
      })
      if(res.code=='200') this.getequipList(this.treevalue)
    },
    // 获取标签信息
    async getequipList(row) {
      const {data:{list}}=await getequipListapi({energyType:this.energyType,orgNo:row.parentId,tagId:row.id})
      this.grouplist = list
      const filteredList = list.filter(item => item.bindFlag === 1)
      this.checkedlist = filteredList.map(item => item.id)
      if (this.grouplist.length == this.checkedlist.length&&this.checkedlist.length) {
        this.isarr='arr'
      } else if(this.checkedlist.length == 0) {
        this.isarr='noarr'
      } else {
        this.isarr=''
      }
    },
    // 全选/全不选
    changeradio(val) {
      if (val == 'arr') {
        this.checkedlist=this.grouplist.map(ele=>ele.id)
      } else {
        this.checkedlist=[]
      }
    },
    //  树节点点击事件
    handleNodeClick(val) {
      this.treevalue=val
      if(val.parentId) this.getequipList(val)
    },
    //下拉选择
    updateModelValue() {
      this.handleNodeClick(this.treevalue)
    },
    //  树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
};
</script>
<style scoped>
.ConsumingConfiguration{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    background-color: #fff;
    width: 300px;
    padding: 20px;
    margin-right: 10px;
  }
  .bodybox{
    width: calc(100% - 310px);
    background-color: #fff;
    padding: 20px;
    .tofor{
      height: 90%;
    }
  }
}
</style>